<template>
  <div>
    <!-- 验证码输入框 -->
    <div class="input-row">
      <label class="input-label">手机号</label>
      <div class="phone-container">
        <input
            type="text"
            class="input-box phone-input"
            placeholder="请输入手机号"
        />
        <lay-button
            type="default"
            :disabled="isCountingDown"
            @click="sendCode"
        >
          {{ isCountingDown ? `${countdown}s后重新获取` : "获取验证码" }}
        </lay-button>
      </div>
    </div>

    <!-- 验证码输入框 -->
    <div class="input-row">
      <label class="input-label">验证码</label>
      <div class="password-container">
        <input
            type="text"
            class="input-box password-input"
            placeholder="请输入验证码"
        />
      </div>
    </div>

    <!-- 登录注册按钮 -->
    <div class="butt">
      <lay-button radius class="butenroll">没有账号注册</lay-button>
      <lay-button type="primary" radius class="butlogin">登录</lay-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countdown: 0, // 倒计时秒数
      isCountingDown: false, // 按钮是否在倒计时中
      timer: null, // 存储定时器
    };
  },
  methods: {
    // 发送验证码并启动倒计时
    sendCode() {
      if (this.isCountingDown) return;

      // 模拟发送验证码的逻辑
      alert("验证码已发送！");

      this.countdown = 60; // 设置倒计时时间为 60 秒
      this.isCountingDown = true;

      // 启动定时器
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown -= 1;
        } else {
          this.isCountingDown = false;
          clearInterval(this.timer); // 清除定时器
        }
      }, 1000);
    },
  },
  beforeUnmount() {
    // 清理定时器以避免内存泄漏
    if (this.timer) clearInterval(this.timer);
  },
};
</script>

<style scoped>

</style>
